<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Detail Region and Effects Sample</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.product {
	cursor: pointer;
}
.hover {
	background-color: #FFFFCC;
}
.selected {
	background-color: #CCCCCC;
}
#description {
	opacity: 0;
	filter: alpha(opacity=0);
	background-color: white;
}
</style>
<script src="../../includes/xpath.js" type="text/javascript"></script>
<script src="../../includes/SpryData.js" type="text/javascript"></script>
<script src="../../includes/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//
// STEP 1: Create a data set.
//
var ds1 = new Spry.Data.XMLDataSet("../../demos/products/products.xml", "products/product");

//
// STEP 2: Define some global variables that will help us deal with the case
//         where the user may rapidly click on items in the master region. We
//         want our effect transitions to be as smooth as possible.
//
var gEffectInProgress = null;
var gPendingSetRowIDRequest = -1;

//
// STEP 3: Define a function observer that will fade-in the detail content
//         whenever the content in the region is re-generated and inserted into the
//         document.
//
//         Note that there is a CSS rule, defined in the style block above, for #description
//         that gives it an opacity of zero, which basically means that when the page
//         is first loaded, the detail region is completely invisible/see-thru. This
//         prevents an initial flash from occuring in some browsers if the content is
//         rendered to the screen before the fade-in effect kicks in.
//
function fadeInContent(notificationType, notifier, data)
{
	if (notificationType != "onPostUpdate")
		return;
	var effect = new Spry.Effect.Fade('description', { to: 100, from: 0, duration: 500, finish: function() {
		// The region is now showing. Process any pending row change request.
		gEffectInProgress = null;
		if (gPendingSetRowIDRequest >= 0)
		{
			var id = gPendingSetRowIDRequest;
			gPendingSetRowIDRequest = -1;
			fadeOutContentThenSetRow(id);
		}
	}});
	effect.start();
}

//
// STEP 4: Register the function as an observer on the detail region.
//
Spry.Data.Region.addObserver('description', fadeInContent);

//
// STEP 5: Define a function which will be used to fade-out the detail region. This
//         same function will define a custom finish function, which will be called by
//         the fade-out effect when it is finished, to trigger a call to setCurrentRow().
//         This custom finish function is registered with the effect by passing it as an
//         option to the effect constructor.
//
function fadeOutContentThenSetRow(rowID)
{
	// If we have an effect already in progress, don't do anything
	// We'll set the rowID when we're done.

	if (gEffectInProgress)
	{
		gPendingSetRowIDRequest = rowID;
		return;
	}

	// If the correct row is already showing, don't do anything!

	if (rowID == ds1.getCurrentRowID())
		return;

	gEffectInProgress = new Spry.Effect.Fade('description', { to: 0, from: 100, duration: 500, finish: function() {
		ds1.setCurrentRow(rowID);
	}});
	gEffectInProgress.start();
}

//-->
</script>
</head>

<body>
<h3>Detail Region and Effects Sample</h3>
<p>This page demonstrates how to apply transition effects to a detail region on a page.</p>
<p>For this example, each time the user clicks on a product in the master region, we want the detail region to fade-out any content it is currently displaying and fade-in the new content. This translates into performing 3 steps:</p>
<ol>
	<li>Fade out the detail region.</li>
	<li>Change the current row of the data set for the detail region.</li>
	<li>Fade in the detail region.    </li>
</ol>
<p>While this sounds simple, folks need to keep in mind that each of those steps performs its work asynchronously, so some care has to be used to make sure that things happen in the correct order. View the source for this sample to see how this is accomplished. </p>
<p>Also note that we had to specify a background color on the div with the &quot;description&quot; id to get around the IE &quot;blocky/bold/jagged text&quot; bug that occurs when programmatically adjusting the opacity on an element. </p>
<hr />
<table width="100%" border="0">
	<tr>
		<td width="21%">
<ul spry:region="ds1" spry:repeatchildren="ds1">
				<li class="product" onclick="fadeOutContentThenSetRow('{ds_RowID}');" spry:select="selected" spry:hover="hover">{name}</li>
			</ul>
		</td>
	  <td width="79%"><div id="description" spry:detailregion=" ds1">{desc}</div></td>
  </tr>
</table>
</body>
</html>
 
